/**
* 联系 我们 模块 - 组件 
*/
<template>
  <div class="h-contact">
    <div class="h-us">
      <h3 class="h730">联系我们</h3>
      <p class="h730">请您填妥本页上的表格，我们会尽快给您回复。</p>
    </div>
    <article class="h-article">
      <el-form :label-position="labelPosition" label-width="110px" :model="form" class="h-form fl">
        
        <el-form-item label="你的姓名" :rules="{required: true}">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        
        <el-form-item label="你的邮箱" :rules="{required: true}">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        
        <el-form-item label="你的电话" :rules="{required: true}">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
        
        <el-form-item label="你的留言宗旨" :rules="{required: true}">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        
        <el-form-item label="你的留言内容" :rules="{required: true}">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
        
        <el-form-item label="">
          <el-button @click="handleSubmitClick">提交留言</el-button>
        </el-form-item>
        
      </el-form>
      <dl class="h-aside fr">
        <dt>联系方式</dt>
        <dd>电话：400-116-8558</dd>
        <dd>邮箱：jyfzb@163.com</dd>
        <dd>工作日：早上9时至晚上6时</dd>
      </dl>
    </article>
  </div>
</template>
<script>
import { conactUp } from '@/api'

export default {
  name: 'ContactUs',
  props: {},
  data () {
    return {
      form: {
        name: '',
        email: '',
        tel: '',
        title: '',
        content: ''
      },
      labelPosition:''
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    /**
     *@Description
     *@Param
     *@Return 提交留言.
     **/
    handleSubmitClick(){
      if(this.form.name.trim() == '' || this.form.tel.trim() == '' || 
      this.form.title.trim() == '' || this.form.email.trim() == '' || this.form.content.trim() == ''){
        this.$message.warning('请填写完整信息！')
        return false
      }
      conactUp({ ...this.form }).then(res => {
        console.log('res****', res)
        this.form.name=""
        this.form.tel=""
        this.form.title=""
        this.form.email=""
        this.form.content=""
        console.log(res)
        this.$message.success(res)
      })
      
    }
  }
}
</script>

<style lang="scss" scoped>
  .h-contact{
    position: relative;
    height: 800px;
    margin-bottom: 20px;
    background: #f2f2f2;
  }
  .h-us {
    height: 340px;
    color: #fff;
    background: #fbc3cd;
    h3{
      padding-top: 70px;
      font-size: 36px;
    }
    p{
      margin-top: 20px;
      font-size: 18px;
    }
  }
  .h-article{
    position: absolute;
    top: 210px;
    left: 50%;
    width: 730px;
    height: 500px;
    margin-left: -365px;
    box-shadow: 0 0 10px #ccc;
    background: #fff;
    .h-form{
      width: calc(100% - 270px);
      padding: 50px 40px 0 40px;
      box-sizing: border-box;
    }
    .h-aside{
      width: 270px;
      height: 100%;
      padding: 50px 0 0 40px;
      box-sizing: border-box;
      color: #fff;
      background: #f78da0;
      dt{
        font-size: 18px;
      }
      dd{
        margin-top: 20px;
      }
    }
  }
  .h730{
    width: 730px;
    margin: 0 auto;
  }
</style>
